<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./jquery/jquery.min.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        div {
            margin: 20px auto;
            width: 600px;
            overflow: hidden;
            position: relative;
        }

        div .ulBox {
            width: 600%;
            position: relative;
        }

        div .ulBox li {
            width: 600px;
            float: left;
        }

        img {
            display: block;
            width: 100%;
        }

        div ol {
            list-style: none;
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            display: none;
        }

        div ol>li {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: red;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

        .leftArrow {
            float: left;
        }

        .rightArrow {
            float: right;
        }

        .circleBox {
            position: absolute;
            bottom: 40px;
            right: 40px;
        }

        .circleBox li {
            width: 30px;
            height: 30px;
            margin: 0 8px;
            background-color: green;
            color: #fff;
            border-radius: 50%;
            float: left;
            font-size: 22px;
            text-align: center;
            box-sizing: border-box;
        }

        div .circleBox .active {
            background-color: pink;
            /* z-index:2; */
        }
    </style>
</head>

<body>
    <div class='divBox'>
        <ul class='ulBox'>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
        </ul>

        <!-- 左右箭头 -->
        <ol class='olBox'>
            <li class='leftArrow'>&lt;</li>
            <li class='rightArrow'>&gt;</li>
        </ol>

        <!-- 动态生成小圆点 -->
        <ul class='circleBox'>

        </ul>

    </div>




    <script>

        /* 1,动态生成小圆点(根据图片的数量去动态生成) 
        2，鼠标移入 左右箭头显示 并且图片停止   鼠标离开  左右箭头隐藏  图片继续移动
        3，点击小圆点可以切换图片
        4，图片可以自动轮播
        5，点击左右箭头可以切换图片*/


        //节流阀思想
        var flag = true;
        var mytimerId;
        var count = 0; //默认图片点击的时候的初始值
        var circleNum = 0; //小圆点初始值  代表初始高亮值

        var divBox = document.querySelector('.divBox');
        var divBoxWidth = divBox.offsetWidth;
        var olBox = document.querySelector('.olBox')
        var ulBox = document.querySelector('.ulBox')
        // 1,动态生成小圆点
        var ulLis = document.querySelectorAll('.ulBox>li');
        var circleBox = document.querySelector('.circleBox');

        for (var i = 0; i < ulLis.length; i++) {
            // console.log(ulLis.length)
            var circleLi = document.createElement('li')
            circleLi.innerText = i + 1;
            circleLi.setAttribute('index', i);
            ulBox.children[i].setAttribute('index', i);
            circleBox.appendChild(circleLi);
        }

        // 让第一个高亮
        circleBox.children[0].classList.add('active')


        // 2,鼠标移入div   左右箭头显示并且图片停止  鼠标离开  左右箭头隐藏  轮播开始

        var circleBoxLis = circleBox.getElementsByTagName('li');//可以获取动态生成的所有元素


        // 点亮小圆点可以切换图片
        for (var i = 0; i < circleBoxLis.length; i++) {
            circleBoxLis[i].onclick = function () {
                if (flag) {
                    flag = false;

                    // 干掉所有人
                    for (var i = 0; i < circleBoxLis.length; i++) {
                        circleBoxLis[i].classList.remove('active')
                    }
                    //当前高亮
                    this.classList.add('active');

                    //获取自定义的i
                    var myIndex = this.getAttribute('index')

                    myanimate(ulBox, -myIndex * divBoxWidth, 10, 50, function () {
                        flag = true;
                    })
                }
            }
        }


        // 点击左右箭头可以切换图片
        var leftArrow = document.querySelector('.leftArrow');
        var rightArrow = document.querySelector('.rightArrow');
        leftArrow.onclick = function(){
            if(flag){
                flag = false;
                if(count == 0){
                    // count = circleBoxLis.length;
                    // console.log(count)
                    ulBox.style.left = -count * divBoxWidth + 'px'
                }
                count--;
                myanimate(ulBox,-count * divBoxWidth,10,50,function(){
                    flag = true;
                })
                if(circleNum == 0){
                    circleNum = circleBoxLis.length;
                }
                circleNum--;
                changeActive(circleNum)
            }
        }
        // 1,需求   点击右箭头切换下一张
        // 2，如果切换到了最后一张图片（即克隆的第一张），那么跳转到第一张

        // 无缝轮播
        // 克隆第一张图片所在的li   并添加到ul的最后面
        var newLi = ulBox.children[0].cloneNode(true);
        ulBox.appendChild(newLi);

        // 实现右边箭头  点击切换图片功能
        rightArrow.onclick = function () {

            var leg = circleBoxLis.length;
            // console.log(leg)
            if (flag) {
                flag = false;
                if (count == leg) {
                    count = 0;
                    ulBox.style.left = 0;
                }
                count++;
                myanimate(ulBox, -count * divBoxWidth, 10, 50, function () {
                    flag = true;
                });
                circleNum++;
                if (circleNum == leg) {
                    circleNum = 0;
                }
                changeActive(circleNum)
            }
        }


        // 实现图片自动轮播  鼠标移入时停止自动轮播  移出时候继续自动轮播
        mytimerId = setInterval(function () {
            rightArrow.click()  //每隔1秒钟  调用一下右箭头的点击事件
        }, 3000)


        divBox.onmouseover = function () {
            olBox.style.display = 'block';
            clearInterval(mytimerId);
            mytimerId = null;
        }


        // 鼠标移出时自动轮播开启
        divBox.onmouseout = function () {
            olBox.style.display = 'none'
            mytimerId = setInterval(function () {
                rightArrow.click()  //每隔1秒钟  调用一下右箭头的点击事件
            }, 1000)
        }

        // 小圆点与图片跟随或者一一对应
        function changeActive(activeIndex) {
            for (var i = 0; i < circleBoxLis.length; i++) {
                circleBoxLis[i].classList.remove('active')
            }
            circleBoxLis[activeIndex].classList.add('active')
        }




        function myanimate(ele, target, step, time, callback) {
            if (ele.timerId) {
                clearInterval(ele.timerId)
            }
            ele.timerId = setInterval(function () {
                var steps = (target - ele.offsetLeft) / step;
                steps = steps > 0 ? Math.ceil(steps) : Math.floor(steps)//有可能steps时负数 趋近于0
                console.log(steps);
                console.log(ele.offsetLeft)
                if (ele.offsetLeft == target) {
                    ele.style.left = target + 'px';
                    clearInterval(ele.timerId);
                    callback && callback();
                }
                ele.style.left = ele.offsetLeft + steps + 'px';
            }, time)
        }
    </script>
</body>

</html>